<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./utils/flexible.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div class="header" id="top">
        <img src="assets/imgs/header_logo.png" alt="">
        <img src="assets/imgs/header_app.png" alt="">
    </div>

    <div class="searchbox">
        <input type="text" placeholder="请输入你想比价的产品">
        <button>搜索</button>
    </div>

    <div class="container">
        <ul>
        </ul>
    </div>

    <div class="discount">
        <span>超值折扣推荐</span>
        <!-- <img src="assets/imgs/" alt=""> -->
    </div>

    <div class="product">
        <ul>

        </ul>
    </div>

    <div class="footer">
        <div class="more">
            <a>更多优惠信息>></a>
        </div>
        <div class="chart">
            <span>品牌排行</span>
        </div>
        <ul>
            <li>登入</li>
            <li>注册</li>
            <li><a href="#top">返回顶部</a></li>
        </ul>
        <p>手机APP下载 慢慢买手机版 -- 掌上比价平台</p>
        <p>m.manmanbuy.com</p>
    </div>
    
    

    <script>
        let html = "";
        $.ajax({
            url: "http://chst.vip:1234/api/getindexmenu"
        }).then(res => {
            creatEl(res.result);
            // console.log($("li img"));
            $(".container ul").on("click","li",clickHandler)
        })


        $.ajax({
            url: "http://chst.vip:1234/api/getmoneyctrl"
        }).then(res => {
            creatDiscount(res.result);
        })

        $(".footer .more a").click(function() {
            location.href = "./pages/"
        })



        function creatEl(data) {
            data.forEach(item => {
                img = item.img.replace(/[/"].+?[\/]/, "\"./assets/imgs/")
                html += `
                    <li class="${item.titlehref}">
                        
                        ${img}
                        
                        <p>${item.name}</p>
                    </li>
                `;
            });          
            $(".container ul").html(html);
        }

        

        function creatDiscount(data) {
            html = "";
            data.forEach(item => {
                // console.log(item);
                html += `
                     <li productId="${item.productId}">
                     ${item.productImgSm}
                     <p>${item.productName}</p>
                     <span>${item.productFrom}${item.productTime}</span>
                     <span>${item.productComCount}</span>
                     </li>
                `;
            });
            // console.log(html);
            $(".product ul").html(html);
            $(".product ul").on("click","li",clickHandler)
        }


        function clickHandler(e) {
            let href = $(this).prop("class")==""? $(this).attr("productId") :  $(this).prop("class") ;
            if(href == "#"){
                $(".container ul li:nth-child(n+9)").slideToggle(500);
            }else if(parseInt(href)){
                location.href = "./pages/indexdetails.html?productid=" + href;
            }else{
                location.href = "./pages/" + href;
            }
        }


    </script>
</body>

</html>